$bgcolor-3d-rose: #ff6392;
$shadowColor-3d-rose: #ff0a78;

$bgcolor-3d-blue: #3d348b;
$shadowColor-3d-blue: #2c0b8e;

$bgcolor-3d-sky: #3a86ff;
$shadowColor-3d-sky: #4433ff;

$bgcolor-3d-red: #ef233c;
$shadowColor-3d-red: #d90429;

$bgcolor-3d-green: #80ed99;
$shadowColor-3d-green: #57cc99;

$bgcolor-3d-yellow: #ffe566;
$shadowColor-3d-yellow: #ffd819;

$bgcolor-3d-sand: #ced4da;
$shadowColor-3d-sand: #adb5bd;

$bgcolor-3d-grey: #6c757d;
$shadowColor-3d-grey: #495057;

$bgcolor-3d-black: #343a40;
$shadowColor-3d-black: #212529;

@mixin buttons-generator-3d-common($bgColor, $shadowColor) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: $bgColor;
  box-shadow: 0 5px $shadowColor;
  &:hover {
    box-shadow: 0 3px $shadowColor;
    top: 1px;
  }
  &:active {
    box-shadow: 0 0 $shadowColor;
    top: 5px;
  }
}

$buttons-generator-3ds: (
  $bgcolor-3d-rose,
  $shadowColor-3d-rose,
  $bgcolor-3d-blue,
  $shadowColor-3d-blue,
  $bgcolor-3d-sky,
  $shadowColor-3d-sky,
  $bgcolor-3d-red,
  $shadowColor-3d-red,
  $bgcolor-3d-green,
  $shadowColor-3d-green,
  $bgcolor-3d-yellow,
  $shadowColor-3d-yellow,
  $bgcolor-3d-sand,
  $shadowColor-3d-sand,
  $bgcolor-3d-grey,
  $shadowColor-3d-grey,
  $bgcolor-3d-black,
  $shadowColor-3d-black
);

$buttons-generator-3d-colors: rose, blue, sky, red, green, yellow, sand, grey,
  black;

@for $i from 1 through length($buttons-generator-3d-colors) {
  .buttons-generator-3d--#{$i} {
    @include buttons-generator-3d-common(
      nth($buttons-generator-3ds, 2 * $i - 1),
      nth($buttons-generator-3ds, 2 * $i)
    );
  }
}
